<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml"
	xmlns:s="http://sduept.security.el/func">
	<ui:define name="head">
		<link rel="stylesheet"
			href="/resources/plugins/datatables/dataTables.bootstrap.css" />
		<style></style>
	</ui:define>
	<ui:define name="content">
		<div class='full-center-content-scroll-noheader'>
			<div id="queryDiv" class="box box-solid with-border">
				<h:form id="headForm" style="margin-bottom:0">
					<p:growl id="msgs" showDetail="true" />
					<div class="box-header">
						<!-- <p:column>
							<h:outputText value="所属变电站 ：" />
						</p:column>
						<p:inputText
							value="#{travelingWaveDeviceController.subtationName}" /> -->
						<!-- <p:column>
							<p:autoComplete id="station1"
								value="#{travelingWaveDeviceController.subtationName}"
								completeMethod="#{controllerUtil.completeCimStation500}"
								scrollHeight="400" dropdown="true">
								<p:ajax event="itemSelect"
									listener="#{travelingWaveDeviceController.onStartStationSelect}" />
							</p:autoComplete>
						</p:column> -->
						<h:outputText value="生产厂家：" style="margin-left:10px;" />
						<p:inputText
							value="#{travelingWaveDeviceController.equipmentManufacturer}" />
						<h:outputText value="设备型号：" style="margin-left:10px;" />
						<p:inputText value="#{travelingWaveDeviceController.deviceType}" />

						<p:commandButton style="margin-left:10px;" icon="ui-icon-search"
							value="查询" update="form:dataTb"
							actionListener="#{travelingWaveDeviceController.search}" />
						<p:commandButton icon="ui-icon-refresh" value="重置"
							actionListener="#{travelingWaveDeviceController.reset}"
							update="headForm form" style="margin-left:5px;" />
					</div>
				</h:form>
			</div>
			<div id="infoDiv" class="box box-solid with-border">
				<h:form id="form">
					<p:dataTable id="dataTb" var="item" scrollable="true"
						value="#{travelingWaveDeviceController.travelingWaveEquipments}"
						rowIndexVar="ite" rowKey="#{item.id}"
						style="margin-bottom:0;text-align:center" emptyMessage="无记录"
						rows="20" paginator="true"
						paginatorTemplate="{Customization} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
						rowsPerPageTemplate="20,50,100" paginatorPosition="bottom">
						<f:facet name="{Customization}">
							<p:outputLabel
								value="总计：#{travelingWaveDeviceController.rowCount} 条记录"
								style="margin-right:20px;" />
						</f:facet>
						<p:column style="width:20px" headerText="序号 ">
							<h:outputText value="#{ite+1}" />
						</p:column>
						<p:column width="60" headerText="IP地址">
							<h:outputText value="#{item.ip}" />
						</p:column>
						<!-- <p:column width="60" headerText="调度数据网备用地址">
							<h:outputText value="#{item.ipSlave}" />
						</p:column> -->
						<p:column width="60" headerText="投运时间">
							<h:outputText style="white-space:pre-wrap;"
								value="#{item.runTime}">
								<f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" />
							</h:outputText>
						</p:column>
						<p:column width="60" headerText="所属变电站">
							<h:outputText value="#{item.subName}" />
						</p:column>
						<p:column width="60" headerText="生产厂家">
							<h:outputText value="#{item.manufacturer}" />
						</p:column>
						<p:column width="60" headerText="设备型号">
							<h:outputText value="#{item.deviceType}" />
						</p:column>
						<p:column width="60" headerText="设备隶属管区">
							<h:outputText value="#{item.areaName}" />
						</p:column>
						<p:column width="60" headerText="设备所属市">
							<h:outputText value="#{item.cityName}" />
						</p:column>
						<p:column width="60" headerText="设备所属省">
							<h:outputText value="#{item.provinceName}" />
						</p:column>
						<p:column width="40" headerText="线路列表">
							<p:commandLink update="dialogForm:linesInfoDialog"
								oncomplete="PF('linesInfoDialog').show()"
								disabled="#{item.monitorLines == null}"
								actionListener="#{travelingWaveDeviceController.setSelected(item)}">
								<h:outputText value="线路列表"
									style="text-decoration:underline;color:red;" />
							</p:commandLink>
						</p:column>
					</p:dataTable>
				</h:form>
			</div>
			<h:form id="dialogForm">
				<p:dialog id="linesInfoDialog" header="线路列表"
					widgetVar="linesInfoDialog" height="500px" width="1100px"
					modal="true">
					<p:dataTable id="linesTable" var="item"
						value="#{travelingWaveDeviceController.lineList}"
						rowIndexVar="ite">
						<p:column width="100" headerText="线路名">
							<h:outputText value="#{item.lineName}" />
						</p:column>
						<p:column width="100" headerText="标准电压等级">
							<h:outputText value="#{item.standVoltagelevel}" />
						</p:column>
						<p:column width="100" headerText="起始站">
							<h:outputText value="#{item.startStName}" />
						</p:column>
						<p:column width="100" headerText="结束站">
							<h:outputText value="#{item.endStName}" />
						</p:column>
						<p:column width="100" headerText="总长(km)">
							<h:outputText title="#{item.lineLength}"
								value="#{item.lineLength}"
								style="white-space:pre;text-overflow:ellipsis" />
						</p:column>

					</p:dataTable>
				</p:dialog>
			</h:form>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script src="/resources/plugins/datatables/jquery.dataTables.js"></script>
		<script
			src="/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="/resources/js/tables/mytable.js"></script>
		<script src="/resources/js/tables/singleScrollTable.js" />
		<script>
			function onSelectDivClick() {
				var div = $('#selectDiv');
				if (div.hasClass('in')) {
					div.collapse('hide');
					$('#selectButtonIcon').removeClass("fa fa-caret-up");
					$('#selectButtonIcon').addClass("fa fa-caret-down");
				} else {
					div.collapse('show');
					$('#selectButtonIcon').removeClass("fa fa-caret-down");
					$('#selectButtonIcon').addClass("fa fa-caret-up");
				}
			}
		</script>
	</ui:define>
</ui:composition>
